<template>
  <f7-page
    login-screen
    class="no-toolbar"
  >
    <f7-navbar>
      <f7-nav-left>
        <f7-link
          back
          icon-material="arrow_back"
        ></f7-link>
      </f7-nav-left>
      <f7-nav-title>
        人脸认证
      </f7-nav-title>
      <f7-nav-right>
      </f7-nav-right>
    </f7-navbar>

    <f7-block class="no-padding no-margin">
      <f7-row class="upload-row">
        <f7-col style="padding:10px">
          <span style="font-size: 15px;color: black;">
            请点击开始，根据提示操作拍摄本人清晰正面免冠人像进行人脸认证。
            <br />
            注意：请在光线较好的环境下拍摄，并露出人像五官，面部无遮挡。
          </span>
        </f7-col>
      </f7-row>

      <f7-row>
        <f7-col style="padding: 30px;">
          <img
            ref="faceImg"
            src="../../assets/img/face/face.png"
            style="width: 100%;height: 100%;border-radius: 50%;"
          />
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-button
      @click="liveCheck"
      class="button button-big btn-registerBtn btn-next"
    >开始认证</f7-button>
  </f7-page>
</template>
<script>
import controller from "../../libs/framework/controller";

export default class instance extends controller {
  mixin() {
    return {
      methods: {
        liveCheck() {
          window.plus.aiFace.liveCheck(
            {
              register: true,
              userId: this.super.$params.faceUserId,
              userName: this.super.$params.userName
            },
            r => {
              if (r && r.success) {
                if (r.faceToken) {
                  this.$$(this.$refs.faceImg).attr(
                    "src",
                    "data:image/png;base64," + r.bestImage
                  );
                  this.$f7.dialog.toast("人脸认证成功");
                  this.next(r.bestImage, r.faceToken);
                } else {
                  this.$f7.dialog.toast("人脸注册失败，请稍后重试");
                }
              } else {
                this.$f7.dialog.alert(r.message || "人脸认证失败，请稍后重试");
              }
            },
            e => {
              this.$f7.dialog.alert(e.message || "人脸认证失败，请稍后重试");
            }
          );
        },
        next(bestImg, token) {
          this.$f7.dialog.preloader("正在完成注册，请稍等...");
          let tempModel = JSON.parse(plus.storage.getItem("face_temp_model"));
          if (tempModel) {
            this.$f7.request.postJSON(
              "/api/face/register/save",
              {
                model: this.$util.extend({}, tempModel, {
                  faceImg: bestImg,
                  faceToken: token,
                  status: "DONE",
                  userType: 2,
                  departmentId: "f1861a54-cc41-11e8-8f42-e89a8f648c2b"
                }),
                userId: tempModel.userId
              },
              r => {
                this.$f7.dialog.close();
                if (r && r.success) {
                  this.$f7.views.current.router.navigate(
                    "/account/registerSuccess/"
                  );
                  plus.storage.removeItem("face_temp_model");
                } else {
                  this.$f7.views.current.router.navigate(
                    "/account/registerError/?message=" + r.message
                  );
                }
              },
              e => {
                this.$f7.dialog.close();
                this.$f7.views.current.router.navigate(
                  "/account/registerError/?message=" + e.message
                );
              }
            );
          } else {
            this.$f7.dialog.close();
            this.$f7.dialog.alert("注册失败，请稍后重试");
          }
        }
      }
    };
  }
}
</script>
<style scoped>
.upload-row {
  border-bottom: 2px dashed #adaaaa;
  background: #efefef94;
}
.upload-img {
  height: 80px;
  padding: 10px 30px;
}
.btn-next {
  position: fixed;
  bottom: 0px;
  width: 100%;
  border-radius: 0px !important;
}
</style>
